<template>
  <div class="layout-detail-baseInfo-wrapper">
    <div class="layout-left-wrapper">
      <CustomSwiper :img-list="imgList" />
    </div>

    <div class="layout-right-wrapper">
      <div class="info-top">
        <div class="name">{{ name }}</div>
        <div class="belongDistrictLabel">
          <i class="el-icon-location-information" /> 所在位置：{{ belongDistrictLabel }}
        </div>
        <div class="item-tags">
          <div v-for="item in tags" :key="item" class="item-tag">{{ item }}</div>
        </div>
      </div>

      <div class="info-center">
        <LabelValueUnit
          v-for="item in baseInfoList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
          :unit="item.unit"
          :mode="Mode.TB"
        />
      </div>
      <div class="info-bottom">
        <slot name="desc">
          <LabelDesc label="楼宇简介" :desc="desc" :length="50" />
        </slot>

        <div class="phone">{{ phone }}</div>
        <div class="tow-btns">
          <el-button class="w-[170px]" type="primary">立即咨询</el-button>
          <el-button class="w-[170px]">联系我们</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomSwiper from '@/components/portal/CustomSwiper2.vue'
import LabelValueUnit, { Mode } from '@/components/portal/LabelValueUnit.vue'
import LabelDesc from '@/components/portal/LabelDesc.vue'
export default Vue.extend({
  components: { CustomSwiper, LabelValueUnit, LabelDesc },
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return { Mode }
  },
  head: {
    title: '基础信息',
  },
  computed: {
    imgList() {
      const imgList = this.dataObj.imgList
      return imgList && imgList.length > 0 ? imgList : undefined
    },
    name() {
      return this.dataObj.name
    },
    belongDistrictLabel() {
      const label = this.dataObj.belongDistrictLabel
      return (label && label.join('')) || '--'
    },
    tags() {
      const { typeLabel, tags } = this.dataObj
      const arr = []
      typeLabel && arr.push(typeLabel)
      if (tags && tags.length > 0) {
        arr.push(...tags)
      }
      return arr
    },
    baseInfoList() {
      const arr = [
        {
          label: '楼宇面积',
          key: 'area',
          value: '--',
          unit: '㎡',
        },
        {
          label: '租售类型',
          key: 'rentOrSaleLabel',
          value: '--',
          unit: '',
        },
        {
          label: '竣工时间',
          key: 'completionTime',
          value: '--',
          unit: '年',
        },
        {
          label: '楼层数',
          key: 'completionTime',
          value: '--',
          unit: '层',
        },
      ]

      arr.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }
      })

      return arr
    },
    desc() {
      return this.dataObj.desc || '--'
    },
    phone() {
      const contacts = this.dataObj.contacts
      if (contacts && contacts.length > 0) {
        return contacts[0]?.phone
      }
      return ''
    },
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.layout-detail-baseInfo-wrapper {
  @apply bg-white rounded-md p-[20px] flex;

  .layout-right-wrapper {
    @apply pl-[40px] flex-1;

    .info-top {
      @apply border-b-[1px] border-[#e2e4ee] h-[131px] flex flex-col justify-between pb-[23px];

      .name {
        @apply w-full text-[#40445D] text-[24px] leading-[32px] overflow-ellipsis overflow-hidden whitespace-nowrap;
      }

      .belongDistrictLabel {
        @apply text-[#898FAA];
      }

      .item-tags {
        @apply flex space-x-4;

        .item-tag {
          @apply bg-[#e5f0ff] py-1 px-4 text-[#006eff]  rounded-[4px];
        }
      }
    }

    .info-center {
      @apply h-[84px] flex items-center justify-between;
      border-bottom: 1px solid #e2e4ee;
    }

    .info-bottom {
      @apply h-[205px] flex flex-col justify-between pt-[20px];

      .phone {
        @apply text-[#FFA800] text-[24px] font-semibold;
      }
    }
  }
}
</style>
